<template>
  <div class="payGoodsItem" v-if="productItem">
    <div class="payGoodsItemDiv">
      <div class="payGoodsItemImg"><img :src="productItem.thumb"></div>
      <div class="payGoodsItemIntro">
        <h3 class="goodsName">{{productItem.name}}</h3>
        <p class="goodsFormat" v-if="priceName">规格：{{priceName.name}}ml</p>
        <div class="goodsNumber">
          <p class="price" v-if="priceName">￥{{priceName.price}}</p>
          <p class="number">x1</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
       productItem: {//商品
        type: Array,
      },
    },
    computed:{
      priceName(){
        return this.productItem.format
      }
    },
  }
</script>

<style scoped>
.payGoodsItem{
  padding: 0 24rpx;
}
.payGoodsItem .payGoodsItemDiv{
  padding: 40rpx 0;
  display: flex;
  border-bottom: 1rpx solid #efeff4;  
}
.payGoodsItem .payGoodsItemImg{
  width: 176rpx;
  height: 176rpx;
}
.payGoodsItem .payGoodsItemImg img{
  width: 100%;
  height: 100%;
}
.payGoodsItem .payGoodsItemIntro{
  position: relative;
  flex: 1;
  margin-left: 30rpx;
  overflow: hidden; 
}
.payGoodsItem .payGoodsItemIntro .goodsName{
  font-size: 28rpx;
  color: #2a2a2a;
  height: 40rpx;
  line-height: 35rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.payGoodsItem .payGoodsItemIntro .goodsFormat{
  font-size: 24rpx;
  color: #9e9e9e;
  margin-top: 10rpx;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
}
.payGoodsItem .payGoodsItemIntro .goodsNumber{
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.payGoodsItem .payGoodsItemIntro .goodsNumber .price{
  font-size: 30rpx;
  color: #e38a8a;
  flex: 1;
}
.payGoodsItem .payGoodsItemIntro .goodsNumber .number{
  font-size: 28rpx;
  color: #000;
}
</style>
